<template>
  <div class="article">
    <a-button type="dashed" style="width: 100%" @click="addArticle">
      <PlusOutlined /> 添加文章
    </a-button>
    <a-spin :spinning="loading">
      <div v-if="articles">
        <div class="articles" v-for="item of articles" :key="item.id">
          <div class="header">
            <EditOutlined @click="edit(item.id)" /><span class="title">{{
              item.title
            }}</span>
            <span class="time">{{ item.updateTime }}</span>
          </div>
          <div class="body">
            <div class="info">
              <span>总阅读数：{{ item.count ? item.count : 0 }}</span>
              <span style="cursor: pointer" @click="updateData(item)"
                ><PieChartOutlined />更新阅读数</span
              >
              <span style="cursor: pointer" @click="showInfo(item)">
                <BarChartOutlined />查看详细数据</span
              >
              <span class="tip">Tip：点击下方图标可跳转文章链接</span>
            </div>
            <div class="opera">
              <a-button @click="diffusion(item.id)" style="width: 100px">
                扩散
              </a-button>
            </div>
          </div>
          <div class="footer">
            <div>
              <a
                :href="chann.url"
                class="channel"
                v-for="(chann, key) of item.channels"
                :key="key"
              >
                <a-avatar :src="chann.logo" />
                <a-popover>
                  <template v-slot:content>
                    <a-form layout="inline">
                      <a-form-item label="更新链接:">
                        <a-input
                          v-model:value="url"
                          placeholder="请输入更新后的链接"
                        >
                        </a-input>
                      </a-form-item>
                      <a-form-item>
                        <a-button
                          type="primary"
                          html-type="submit"
                          @click="updateUrl(key, item.id)"
                        >
                          更新
                        </a-button>
                      </a-form-item>
                    </a-form>
                  </template>
                  <CheckCircleTwoTone
                    class="check"
                    style="font-size: 12px"
                    twoToneColor="#52c41a"
                    v-if="chann.url"
                  />
                  <CloseCircleTwoTone
                    v-else
                    class="check"
                    style="font-size: 12px"
                    twoToneColor="#f56c6c"
                  />
                </a-popover>
                <span class="count">{{ chann.read ? chann.read : 0 }}</span>
              </a>
            </div>

            <div class="info">
              <span class="label" v-for="i of item.tags" :key="i">
                {{ i }}
              </span>
              <span class="cate">
                <TagOutlined />
                {{ item.category[0] }}
              </span>
            </div>
          </div>
        </div>
        <div class="page">
          <span>共{{ count }}篇文章</span>
          <a-pagination
            v-model:current="current"
            :pageSize="pageSize"
            :total="count"
            show-less-items
          />
        </div>
      </div>
      <a-empty v-else :image="simpleImage" />
    </a-spin>
    <Diffusion :open="visible"></Diffusion>
    <a-modal title="详细信息" v-model:visible="show" width="70%" :footer="null">
      <a-table :columns="columns" :scroll="{x:800}" :data-source="dataInfo" :rowKey="record=>record.channel">
        <template v-slot:logo="{ record }">
          <a :href="record.url" target="_blank">
            <a-avatar :src="record.logo" />
          </a>
        </template>statu
         <template v-slot:statu="{ record }">
            <CheckCircleTwoTone
                    class="check"
                    style="font-size: 12px"
                    twoToneColor="#52c41a"
                    v-if="record.url"
                  />
                  <CloseCircleTwoTone
                    v-else
                    class="check"
                    style="font-size: 12px"
                    twoToneColor="#f56c6c"
                  />
        </template>
         <template v-slot:url="{ record }">
          <a :href="record.url" target="_blank">{{record.url}}</a>
        </template>
         <template v-slot:opera="{record}">
           <a-button @click="deleteChann(record)">删除</a-button>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  PlusOutlined,
  EditOutlined,
  CheckCircleTwoTone,
  CloseCircleTwoTone,
  PieChartOutlined,
  BarChartOutlined,
  TagOutlined,
} from "@ant-design/icons-vue";
import { Empty } from "ant-design-vue";
import Diffusion from "./Diffusion";
const columns = [
  {
    title: "渠道",
    dataIndex: "logo",
    key:'logo',
    slots: { customRender: "logo" },
  },
  {
    title: "状态",
    slots: { customRender: "statu" },
  },

  {
    title: "目标地址",
    dataIndex: "url",
    key:'url',
    slots: { customRender: "url" },
  },

  {
    title: "访问量",
    dataIndex: "read",
    key:'read',
    slots: { customRender: "read" },
  },

  {
    title: "点赞数",
    dataIndex: "like",
    key:'like',
    slots: { customRender: "like" },
  },

  {
    title: "评论数",
    dataIndex: "comment",

    key:'comment',
    slots: { customRender: "comment" },
  },

  {
    title: "操作",
    slots: { customRender: "opera" },
  },
];

export default {
  name: "Article",
  components: {
    PlusOutlined,
    EditOutlined,
    CheckCircleTwoTone,
    CloseCircleTwoTone,
    Diffusion,
    PieChartOutlined,
    BarChartOutlined,
    TagOutlined,
  },
  data() {
    return {
      columns,
      current: 1,
      pageSize: 3,
      loading: false,
      visible: false,
      url: "",
      show: false,
      channels: {},
      id:0,
    };
  },
  computed: {
    articles() {
      const articles = this.$store.getters.getArticles(
        this.current,
        this.pageSize
      );
      return articles;
    },
    count() {
      return this.$store.state.channel.articles.length;
    },
    dataInfo() {
      return this.channels;
    },
  },
  methods: {
    deleteChann(item){
        const config=this.$store.getters.getConfig(item.channel)
        console.log(config)
        window.chrome.runtime.sendMessage(
         window.CHROME_ID,
            {
              func: `ChannelService.${item.channel}.articleDelete`,
              args: { url: item.url,cookie:config.cookie},
              js: localStorage.getItem("operation"),
            },
            (t) => {
             console.log(t)
              let article =this.$store.getters.getArticle(this.id)
              delete article.channels[item.channel]
              // this.$store.commit("updateArticle", article);
              console.log(article)
             if(t.ok){
               this.$message.success( "删除成功");
             }else{
                this.$notification.error({
                message: "文章删除失败",
                description: `请手动前往删除`,
                icon: <CloseCircleTwoTone style="color: #f56c6c" />,
            });
             }

            }
        )
    },
    showInfo(article) {
      this.show = true;
      let arr=[]
      this.id=article.id
      for(let i in article.channels){
        let chann=article.channels[i]
        chann['channel']=i
        arr.push(chann)
      }

      this.channels =arr;
    },
    updateData(article) {
      let count = 0;
      for (let item in article.channels) {
        const channel = article.channels[item];
        if (channel.url) {
          window.chrome.runtime.sendMessage(
            window.CHROME_ID,
            {
              func: `ChannelService.${item}.articleData`,
              args: { url: channel.url },
              js: localStorage.getItem("operation"),
            },
            (t) => {
              console.log(t);
              count += parseInt(t.data.read);
              let newChann = {};
              Object.assign(newChann, article.channels[item], t.data);
              article.channels[item] = newChann;
              article["count"] = count;
              console.log(article);
              this.$store.commit("updateArticle", article);
            }
          );
        }
      }
    },
    updateUrl(key, id) {
      console.log("更新链接", key, id);
      this.$store.commit("setId", id);
      this.$store.commit("updateUrl", { channel: key, url: this.url });
      this.$message.success("链接更新成功");
    },
    // 添加文章
    addArticle() {
      this.$router.push("/article/add");
    },
    // 编辑文章
    edit(id) {
      console.log(id);
      this.$router.push({ path: "/article/update/" + id });
    },
    // 扩散
    diffusion(id) {
      this.$store.commit("setId", id);
      this.visible = !this.visible;
    },
  },
  watch: {
    articles() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
  },
  created() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 300);
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
};
</script>
<style lang="stylus" scoped>
.article {
  padding: 10px 20px;

  .page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }

  .articles {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;

    .header {
      font-size: 18px;
      padding: 5px 0;

      .title {
        color: #000;
        margin: 0 5px;
      }

      .time {
        float: right;
        color: #ccc;
        font-size: 14px;
      }
    }

    .body {
      padding: 5px 0;
      color: #ccc;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap wrap
      span {
        margin: 0 5px;
      }

      .tip {
        margin-left: 20px;
        padding: 3px 5px;
        background-color: #f5f5f5;
        color: #666;
      }
    }

    .footer {
      color: #ccc;
      padding: 5px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap wrap
      .channel {
        display: inline-block;
        position: relative;
        .check {
          position: absolute;
          top: 0;
          left: 26px;
        }

        .count {
          text-align: center;
          font-size: 12px;
          color: #ccc;
          margin-right 6px
          vertical-align: bottom;
        }
      }

      .info {
        margin 10px 0
        .cate {
        }

        .label {
          margin:0 5px;
          padding: 2px 5px;
          background-color: #f5f5f5;
          color: #666;
        }
      }
    }
  }
}
@media (max-width: 730px) 
  .tip
    display none
  .opera
    width 100%
    .ant-btn
      width 100%!important
</style>